<template>
  <a-form-model
    ref="form"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    :hideRequiredMark="true"
  >
    <div class="flex justify-end" v-if="!Archive">
      <a-button type="primary" v-if="!!form.projectDetailId && readOnly" @click="readOnly = false" v-action:update>
        修改
      </a-button>
      <a-button v-else type="primary" @click="updata" v-action:update>
        保存
      </a-button>
    </div>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="项目地址：" prop="addr">
          <a-input v-model="form.addr" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="贷款顾问：" prop="sysUserId">
          <a-input v-model="currentUser.username" disabled />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="顾问公司：" prop="sysUserName">
          <a-input v-model="currentUser.company" disabled />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="申请日期：" prop="applyDate">
          <a-date-picker v-model="form.applyDate" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="途径：" prop="channel">
          <a-radio-group v-model="form.channel" :disabled="readOnly && form.projectDetailId ? true : false">
            <a-radio :value="item.value" v-for="item in channelName" :key="item.text">
              {{ item.text }}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="中介公司(如适用)：" prop="agency" v-if="form.channel == 2">
          <a-input v-model="form.agency" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="中介人(如适用)：" prop="agencyUser" v-if="form.channel == 2">
          <a-input v-model="form.agencyUser" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="申请贷款本金金额：" prop="principal">
          <m-input-number
            v-model="form.principal"
            class="length"
            :disabled="readOnly && form.projectDetailId ? true : false"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="区域：" prop="region">
          <a-input v-model="form.region" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="方位：" prop="position">
          <a-radio-group v-model="form.position" :disabled="readOnly && form.projectDetailId ? true : false">
            <a-radio :value="item" v-for="item in positions" :key="item">
              {{ item }}
            </a-radio>
          </a-radio-group>
          <a-input
            v-model="otherPosition"
            :disabled="form.position != '其他' || (readOnly && form.projectDetailId ? true : false)"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="项目种类：" prop="category">
          <a-select v-model="form.category" :disabled="readOnly && form.projectDetailId ? true : false">
            <a-select-option :value="item.value" v-for="item in cateType" :key="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="项目类型：" prop="projectType">
          <a-radio-group v-model="form.projectType" :disabled="readOnly && form.projectDetailId ? true : false">
            <a-radio :value="item" v-for="item in projectType" :key="item">
              {{ item }}
            </a-radio>
          </a-radio-group>
          <a-input
            v-model="otherProjectType"
            :disabled="form.projectType != '其他' || (readOnly && form.projectDetailId ? true : false)"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item
          label="总土地面积(平方米)："
          prop="landArea"
          :label-col="longLabelCol"
          :wrapper-col="longWrapperCol"
        >
          <m-input-number
            v-model="form.landArea"
            class="length"
            :disabled="readOnly && form.projectDetailId ? true : false"
          />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="总套数：" prop="totalSets">
          <a-input-number
            v-model="form.totalSets"
            :min="0"
            :precision="0"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')"
            class="length"
            :disabled="readOnly && form.projectDetailId ? true : false"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item
          label="总建筑面积(平方米)如适用："
          prop="floorArea"
          :label-col="longLabelCol"
          :wrapper-col="longWrapperCol"
        >
          <m-input-number
            v-model="form.floorArea"
            class="length"
            :disabled="readOnly && form.projectDetailId ? true : false"
          />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="RC Status：" prop="RC">
          <a-select v-model="form.RC" :disabled="readOnly && form.projectDetailId ? true : false">
            <a-select-option :value="item.value" v-for="item in status" :key="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="BC Status：" prop="BC">
          <a-select v-model="form.BC" :disabled="readOnly && form.projectDetailId ? true : false">
            <a-select-option :value="item.value" v-for="item in status" :key="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="zoning：" prop="zoning">
          <a-input v-model="form.zoning" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="安全保障排行：" prop="rankSecure">
          <a-select v-model="form.rankSecure" :disabled="readOnly && form.projectDetailId ? true : false">
            <a-select-option :value="item.value" v-for="item in rankSecure" :key="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="材料供应状态：" prop="materialDesc">
          <a-input v-model="form.materialDesc" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="项目状态：" prop="projectDesc">
          <a-input v-model="form.projectDesc" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="土地购买价格：" prop="landPrice">
          <m-input-number
            v-model="form.landPrice"
            class="length"
            :disabled="readOnly && form.projectDetailId ? true : false"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="土地购买日期：" prop="landDate">
          <a-date-picker v-model="form.landDate" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="GST Refund Status：" prop="GST">
          <a-select v-model="form.GST" :disabled="readOnly && form.projectDetailId ? true : false">
            <a-select-option :value="item.value" v-for="item in GST" :key="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="目前贷款机构：" prop="currLoanCompany">
          <a-input v-model="form.currLoanCompany" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="目前贷款金额：" prop="currLoan">
          <m-input-number
            v-model="form.currLoan"
            class="length"
            :disabled="readOnly && form.projectDetailId ? true : false"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="目前贷款利率：" prop="currRate">
          <m-input v-model="form.currRate" :disabled="readOnly && form.projectDetailId ? true : false" />
        </a-form-model-item>
      </a-col>
    </a-row>
  </a-form-model>
</template>

<script>
import { channelName, status, rankSecure, GST, cateType } from '@/dict'
import { getProjectById, updateProjectById, createHistory } from '@/api/common'
import moment from 'moment'
import { commonRule, dateRule } from '@/utils/rules'
export default {
  name: 'ProjectBrief',
  data() {
    const form = {
      addr: '',
      sysUserId: '',
      sysUserName: '',
      applyDate: '',
      channel: 1,
      agency: '',
      agencyUser: '',
      principal: '',
      region: '',
      position: '东',
      category: 'Bridge Loan',
      projectType: '投资贷款',
      landArea: '',
      totalSets: '',
      floorArea: '',
      RC: 1,
      BC: 1,
      zoning: '',
      rankSecure: 1,
      materialDesc: '',
      projectDesc: '',
      landPrice: '',
      landDate: '',
      GST: 1,
      currLoanCompany: '',
      currLoan: '',
      currRate: ''
    }
    return {
      Archive: 0,
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      longLabelCol: { span: 10 },
      longWrapperCol: { span: 10 },
      form,
      otherPosition: '',
      otherProjectType: '',
      rules: {
        addr: commonRule,
        sysUserId: commonRule,
        sysUserName: commonRule,
        applyDate: dateRule,
        channel: commonRule,
        agency: commonRule,
        agencyUser: commonRule,
        principal: commonRule,
        region: commonRule,
        position: [
          {
            required: true,
            validator: (r, v, cb) => {
              if (v == '其他' && !this.otherPosition) {
                cb(new Error('请输入其他'))
              } else {
                cb()
              }
            },
            message: '请输入',
            trigger: 'blur'
          }
        ],
        category: commonRule,
        projectType: [
          {
            required: true,
            validator: (r, v, cb) => {
              if (v == '其他' && !this.otherProjectType) {
                cb(new Error('请输入其他'))
              } else {
                cb()
              }
            },
            message: '请输入',
            trigger: 'blur'
          }
        ],
        landArea: commonRule,
        totalSets: commonRule,
        floorArea: commonRule,
        RC: commonRule,
        BC: commonRule,
        zoning: commonRule,
        rankSecure: commonRule,
        materialDesc: commonRule,
        projectDesc: commonRule,
        landPrice: commonRule,
        landDate: dateRule,
        GST: commonRule,
        currLoanCompany: commonRule,
        currLoan: commonRule,
        currRate: commonRule
      },
      channelName,
      status,
      rankSecure,
      GST,
      cateType,
      readOnly: true,
      page: '2',
      //项目类型 其他时输入框可以输入
      projectType: ['投资贷款', '发展贷款', '建筑贷款', '其他'],
      //方向 其他时输入框可以输入
      positions: ['东', '南', '西', '北', '中', '其他']
    }
  },
  computed: {
    currentUser() {
      return this.$store.getters.userInfo
    }
  },
  mounted() {
    let id = this.$route.query.id
    if (id) {
      this.getData()
    }
  },
  methods: {
    async getData() {
      let id = this.$route.query.id
      this.Archive = Number(this.$route.query.Archive)
      const res = await getProjectById(id)
      let data = res.result.data
      if (data) {
        let _form = Object.assign(data, data.projectDetail)
        let newData = {}
        for (let k in this.form) {
          newData[k] = _form[k]
        }
        if (
          _form.projectDetail.position != '东' &&
          _form.projectDetail.position != '南' &&
          _form.projectDetail.position != '西' &&
          _form.projectDetail.position != '北' &&
          _form.projectDetail.position != '中'
        ) {
          newData.position = '其他'
          this.otherPosition = _form.projectDetail.position
        } else {
          newData.position = _form.projectDetail.position
        }
        if (
          _form.projectDetail.projectType != '投资贷款' &&
          _form.projectDetail.projectType != '发展贷款' &&
          _form.projectDetail.projectType != '建筑贷款'
        ) {
          newData.projectType = '其他'
          this.otherProjectType = _form.projectDetail.projectType
        } else {
          newData.projectType = _form.projectDetail.projectType
        }
        newData.projectDetailId = data.projectDetail.id
        newData.applyDate = moment(newData.applyDate * 1000)
        newData.landDate = moment(newData.landDate * 1000)
        Object.assign(this.form, newData)
      }
    },
    updata() {
      let id = this.$route.query.id
      this.$refs.form.validate(async valid => {
        if (valid) {
          const form = Object.assign({}, this.form)
          form.applyDate = Number(form.applyDate.startOf('day').format('X'))
          form.landDate = Number(form.landDate.startOf('day').format('X'))
          form.position = form.position == '其他' ? this.otherPosition : form.position
          form.projectType = form.projectType == '其他' ? this.otherProjectType : form.projectType
          updateProjectById(id, form)
          const history = {
            recordType: 1,
            tableId: Number(id)
          }
          await createHistory(history)
        }
      })
      this.readOnly = true
    }
  }
}
</script>
<style>
.space {
  margin-left: 45%;
}
</style>
